import { YuqueToggle } from './Components/YuqueToggle';
import './App.css';

function App() {
  const handleContentChange = (content: string) => {
    console.log('内容已更新:', content);
  };

  return (
    <div className="app-container">
      <main className="app-main">
        <YuqueToggle
          defaultValue="<p><span style='color: rgb(25, 101, 255)'>欢迎使用语雀编辑器！</span></p><p>🎉 您可以：</p><ul><li>点击右上角按钮在<strong>编辑</strong>和<strong>预览</strong>模式之间切换</li><li>使用工具栏丰富的功能来编辑内容</li><li>实时预览编辑效果</li></ul>"
          onChange={handleContentChange}
          style={{ height: '100%', minHeight: '500px' }}
        />
      </main>
    </div>
  );
}

export default App;